import Vue from 'vue'
import VueRouter from 'vue-router'
import Zoo from '../views/Zoo.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Zoo',
    component: Zoo,
    children: [
      {
        path: 'monkey',
        name: 'monkey',
        // 使用路由元信息meta设置一个属性isTicket来表示该页面是否需要权限
        meta: {
          isTicket: false
        },
        component: () => import ('../views/monkey.vue')
      },
      {
        path: 'longNick',
        name: 'longNick',
        meta: {
          isTicket: false
        },
        component: () => import ('../views/longNick.vue')
      },
      {
        path: 'whiteBlack',
        name: 'whiteBlack',
        meta: {
          isTicket: false
        },
        component: () => import ('../views/whiteBlack.vue')
      },
      {
        path: 'lion',
        name: 'lion',
        meta: {
          isTicket: true
        },
        component: () => import ('../views/lion.vue')
      },
      {
        path: 'bear',
        name: 'bear',
        meta: {
          isTicket: true
        },
        // 路由独享守卫
        // beforeEnter: (to, from, next) => {
        //   // ...
        //   next()
        // },
        component: () => import ('../views/bear.vue')
      },
      {
        path: 'panda',
        name: 'panda',
        meta: {
          isTicket: true
        },
        component: () => import ('../views/panda.vue')
      }
    ]
  },
  {
    path: '/ticket',
    name: 'ticket',
    component: () => import ('../views/ticket')
  }
]

const router = new VueRouter({
  routes
})
// beforeEach 全局路由前置守卫
// router.beforeEach((to, from, next) => {
//   // some 匹配数据中是否用满足要求的项 如果有则返回true
//   if (to.matched.some(record => record.meta.isTicket)) {
//     // this route requires auth, check if logged in
//     // if not, redirect to login page.
//     if(localStorage.getItem('ticket') !== "false") {
//       next()
//     } else {
//       // console.log(1)
//       alert('你买没买票')
//       next('/ticket')
//     }
//   } else {
//     next() // 确保一定要调用 next()
//   }
// })
  // 路由解析守卫
// router.beforeResolve((to, from, next) => {
//   console.log(to, from)
//   next()
// })
// 路由后置守卫 这个时候已经进入页面 所以 后置守卫没有next参数
// router.afterEach((to, from) {

// })
// router.beforeEach((to, from, next) => {
//   // to 要进入的页面的路由对象
//   // from 要离开的页面的路由对象
//   // next空值要不要放行 
//   // console.log(to, from)
//   // console.log(1)
//   // console.log(to)
//   // 判断要进入的页面是不是要买票的区域
//   if(to.name == "lion" || to.name == "bear" || to.name == "panda") {
//     // console.log(localStorage.getItem('ticket'))
//     if(localStorage.getItem('ticket') !== "false") {
//       next()
//     } else {
//       // console.log(1)
//       // alert('你买没买票')
//       next('/ticket')
//     }
//   } else {
//     next()
//   }
  
// })
export default router
